<template>
  <div class="feedback">
    <el-popover ref="feedbackRef" popper-class="feedback-popover" placement="right" width="300" trigger="click">
      <div class="feedback-title">请您为治理平台使用体验打分:</div>
      <el-rate v-model="rate" show-text :texts="['非常不满意', '不满意', '一般', '满意', '非常满意']"></el-rate>
      <div v-if="rate">
        <p style="color: #333; line-height: 40px">请您为体验做出评价（多选）：</p>
        <el-checkbox-group v-model="checkLists[rate]">
          <el-checkbox :label="item" v-for="(item, index) in data[rate]" :key="index">
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
        <el-input
          v-if="other"
          style="margin-top: 10px"
          type="textarea"
          v-model="otherVal"
          :autosize="{ minRows: 3, maxRows: 6 }"
          placeholder="请输入您的意见以供我们持续改进"
        ></el-input>
      </div>
      <p style="line-height: 40px">感谢您的反馈！</p>
      <div style="text-align: center; margin: 5px 0 0 0">
        <el-button type="primary" :loading="loading" @click="submitFeedback">提交反馈</el-button>
      </div>
      <el-button slot="reference" size="medium" circle icon="el-icon-s-comment"></el-button>
    </el-popover>
  </div>
</template>

<script>
import { configScoreApi, riskScopeConfigApi } from "api/api";
export default {
  name: "feedback",
  props: {},
  components: {},
  data() {
    return {
      rate: null,
      otherVal: "",
      checkLists: { 1: [], 2: [], 3: [], 4: [], 5: [] },
      data: {},
      loading: false,
    };
  },
  computed: {
    other() {
      return this.checkLists[this.rate].includes("其他") ? true : false;
    },
  },
  mounted() {
    this.riskScopeConfig();
  },
  methods: {
    riskScopeConfig() {
      riskScopeConfigApi().then((res) => {
        let data = res.data[0].params;
        this.data = data;
      });
    },
    submitFeedback() {
      this.loading = true;
      if (!this.rate) {
        this.message.error({ message: "请打分并选择评价" });
        return;
      }
      configScoreApi({ star: this.rate, other: this.otherVal, options: this.checkLists[this.rate] }).then((res) => {
        this.loading = false;
        let state = this.message.state(res);
        if (!state) return;
        this.reset();
      });
    },
    reset() {
      for (let key in this.checkLists) {
        this.checkLists[key] = [];
      }
      this.otherVal = "";
      this.rate = null;
      this.$refs.feedbackRef.doClose();
    },
  },
  watch: {
    rate() {
      this.otherVal = "";
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
::v-deep .el-popover {
  overflow-y: hidden;
}
.feedback {
  position: fixed;
  bottom: 30%;
  right: 20px;
  z-index: 999;
}
.feedback-title {
  //   text-align: center;
  color: rgb(51, 51, 51);
  font-size: 15px;
  line-height: 28px;
}
::v-deep .el-icon-s-comment {
  font-size: 22px;
  color: $color;
}
.el-rate {
  margin: 10px 0;
  ::v-deep .el-rate__item {
    i {
      font-size: 30px;
    }
  }
}
.el-checkbox {
  display: block;
  line-height: 25px;
}
</style>
